<template>
  <div class="warpper">
    <h2>我是conut组件</h2>
    <h2>当前的数为:{{ this.$store.state.num }}</h2>

    <select name="" id="" v-model.number="n">
      <option value="1">1</option>
      <option value="2">3</option>
      <option value="3">3</option>
    </select>

    <button @click="add">数字加1</button>
    <button @click="reduce">数字减1</button>
    <button @click="odd">数字是奇数再加1</button>
    <button @click="asyncNum">点击等一秒后加你</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data() {
    return {
      // num: 1,
      n: 1
    }
  },
  methods: {
    add() {
      this.$store.commit('add', this.n)
    },
    reduce() {
      this.$store.commit('reduce', this.n)
    },
    odd() {
      this.$store.dispatch('odd', this.n)
    },
    asyncNum() {
      this.$store.dispatch('anyncNum', this.n)
    }
  },
}
</script>

<style scoped>
.warpper {
  background-color: rgba(183, 73, 73, 0.075);
  padding: 15px;
  box-shadow: 0 0 10px;
}

button {
  max-width: 0 7px;
  color: darkslategrey;
}
</style>